import React,{useEffect,useState } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card,Table,Descriptions,Tag } from 'antd';
import { connect } from 'umi';
import Contanst from '@/config/contanst'
import {history} from 'umi'
import Yuan from '@/utils/Yuan';
const CardDetail = props =>{
    const { dispatch,vipCard ,match,consumeRecord} = props;
    useEffect(() => {
        if (dispatch) {
          dispatch({
            type: 'cubeVipCardDetail/getMemberCardInfo',
            payload: {
                cardId:match.params.cardId,
                memberId:match.params.memberId
            },
          })
          dispatch({
            type: 'cubeVipCardDetail/getConsumeRecord',
            payload: {
                cardId:match.params.cardId,
                memberId:match.params.memberId
            },
          })
         }
       }, []);
    const columns = [
        {
          title: '发生时间',
          dataIndex: 'consumeTime',
        },
        {
            title: '金额',
            dataIndex: 'money',
            render:(text)=><Yuan>{text}</Yuan>
          },
          {
            title: '操作人',
            dataIndex: 'createUser',
          },
          {
            title: '销售',
            dataIndex: 'salesName',
          },
          {
            title: '消费场馆',
            dataIndex: 'venueName',
          },
          {
            title: '会员名称',
            dataIndex: 'memberName',
          },
          {
            title: '手机号',
            dataIndex: 'phone',
          },
          {
            title: '消费说明',
            dataIndex: 'consumeStatement',
          },
      ];

      /**
       * 跳转会员详情页
       */
    const go2VipDetail = () =>{
      history.push(`/vip/center/detail/${match.params.memberId}`);
    }
    return <PageHeaderWrapper>
        <Card title="会员卡信息" style={{marginBottom:32}}>
        <Descriptions size="small">
            <Descriptions.Item label="会员"><a onClick={()=>go2VipDetail()}>{vipCard.memberName}</a></Descriptions.Item>
            <Descriptions.Item label="会员卡类型">{Contanst.MemberCardTypeMap[vipCard.cardType]}</Descriptions.Item>
            <Descriptions.Item label="会员卡名称">{vipCard.cardName}</Descriptions.Item>
            <Descriptions.Item label="会员卡创建时间">{vipCard.createTime}</Descriptions.Item>
            <Descriptions.Item label="当前状态"><Tag>{Contanst.CardBindStatusMap[vipCard.cardStatus]}</Tag></Descriptions.Item>
            {
                vipCard.cardType=='3'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余天数">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            {
                 vipCard.cardType=='2'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余次数">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            {
                 vipCard.cardType=='1'&&<>
                    <Descriptions.Item label="有效期">{vipCard.periodValidity}</Descriptions.Item>
                    <Descriptions.Item label="剩余金额">{vipCard.balance}</Descriptions.Item>
                 </>
            }
            <Descriptions.Item label="累计实收金额">{vipCard.totalMoney}</Descriptions.Item>
            <Descriptions.Item label="开卡场馆">{vipCard.venueName}</Descriptions.Item>
            <Descriptions.Item label="备注">{vipCard.zb}</Descriptions.Item>
          </Descriptions>
        </Card>
        <Card title="消费记录">
            <Table columns={columns} dataSource={consumeRecord}/>
        </Card>
    </PageHeaderWrapper>
}

export default connect(({ loading,cubeVipCardDetail }) => ({
    vipCard: cubeVipCardDetail.vipCard,
    consumeRecord:cubeVipCardDetail.consumeRecord
  }))(CardDetail);